import { View } from "@tarojs/components";
import { NavBar, Button, ActionSheet } from "@antmjs/vantui";
import { IconFont } from "../../../../components";
import Taro,{getMenuButtonBoundingClientRect} from "@tarojs/taro";
import { useState } from "react";
import './index.scss'

const AdFress = () => {
    const [show,setShow] = useState(false)
    const btn = getMenuButtonBoundingClientRect();
    //订阅会员
    const activateMembership = () => {
         setShow(true)
    }

    //获取金币
    const obtainGoldCoins = () => {

    }

    return (
        <View className="adfree-frame-view">
            <NavBar title='免广告权益' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View className="adfree-view" style={{paddingTop:btn.bottom+20}}>
                <IconFont name="ac-quanyi" size={200} />
                <View className="info-text-view">
                    <View className="title-view">Plus 权益</View>
                    <View className="subtitle-view">订阅易搜索的Plus高级版，可获得免除应用内所有广告的权益！</View>
                </View>
                <View className="bottom-bg-view">
                    <Button onClick={activateMembership} className="moon-view" type='primary'>300金币/月</Button>
                    <Button onClick={obtainGoldCoins} className="more-view" plain hairline type="primary">获得金币</Button>
                </View>
            </View>
            <ActionSheet show={show} title="订阅" onClose={() => setShow(false)}>
                <View className="sheet-view">您是否决定花费300金币订单Plus权益，订阅成功后，您将会获得时长为一个月的Plus权益!</View>
                <View className="sheet-box-view">
                    <View className="btn-view" ><Button onClick={()=>setShow(false)} className="btn" type='primary' plain hairline >取消</Button></View>
                    <View className="btn-view"><Button className="btn" type='primary'>订阅</Button></View>
                </View>
            </ActionSheet>
        </View>
    )
}

export default AdFress